<!-- 依赖注入  父子组件传参 -->
<template>
    <h1>Provide2.vue(父)</h1>
    <div class="box">
    </div>
    <hr>
    <Provide3 />
</template>

<script setup lang='ts'>
// import { ref, reactive } from 'vue'
import { Ref, inject } from 'vue';
import Provide3 from './Provide3.vue';

const color = inject<Ref<string>>('color')
</script>

<style scoped lang="scss">
.box {
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
    background: v-bind(color);
}
</style>